<template>
	<view class="content">

		<u-popup :show="show1" mode="center" bgColor="transparent">
			<view class="zhegntanchu">
				<!-- 标题 -->
				<view class="popuptitle">
					{{title}}
					<image class="lty_li_user_tx" src="https://s4.ax1x.com/2022/01/30/H9rtjf.png" mode=""
						@click="zhiliaodangwei()"></image>
				</view>
				<view class="popupcontenm">
					<view>
						{{tips}}
					</view>
					<view class="popup-btn">确定</view>
				</view>

		 </view>
		</u-popup>
		<u-sticky :customNavHeight="height">
			<view class="top-tabs">
				<view class="top-tabs-li" v-for="(item,index) in orderState" :key="index" :class="active == index?'active':''" @click="isCardTabs(item.type,index)">{{item.title}}</view>
			</view>
		</u-sticky>
		<view style="margin-top: 10rpx;"></view>
		<view v-if="orderType != 'shouhou'">
			<view class="order-list"
				v-for="(order,index) in orderList" 
				:key="index"
				@tap.stop="jump('/pages/userorde-xq/userorde-xq', { id: order.id })"
			>
				<view class="order-no">
					<view class="no">订单号：{{ order.order_sn }}</view>
					<view class="zhuangtai">{{ order.status_name }}</view>
				</view>
				<view class="order-goods">
					<view class="order-goods-li" v-for="goods in order.item" :key="goods.id">
						<image :src="goods.goods_image" mode="aspectFill"></image>
						<view class="order-goods-li-r">
							<view class="title">
								<view class="title-name">
									<view class="u-line-1">{{goods.goods_title}}</view>
									<text class="price">¥{{goods.goods_price}}</text>
								</view>
							</view>
							<view class="guige" v-if="goods.status_name">
								{{ goods.goods_sku_text ? goods.goods_sku_text : '' }}
								<text class="num">×{{goods.goods_num}}</text>
							</view>
						</view>
					</view>
					<view class="order-goods-zj">
						<text>总价：{{order.total_fee}}</text>
						<text>{{ order.status <= 0 ? '需付款' : '实付款' }}：{{order.total_fee}}</text>
					</view>
				</view>
				<view class="order-caozuo" v-if="order.btns.length">
					<block v-for="orderBtn in order.btns" :key="orderBtn">
						<!-- <view class="order-caozuo-btn">申请售后</view> -->
						<view v-if="orderBtn === 'express'" class="order-caozuo-btn">查看物流</view>
						<view v-if="orderBtn === 'cancel'" class="order-caozuo-btn">取消订单</view>
						<view v-if="orderBtn === 'delete'" class="order-caozuo-btn" @click="isDel()">删除订单</view>
						<!-- <view class="order-caozuo-btn success-btn">再次购买</view> -->
						<view v-if="orderBtn === 'pay'" class="order-caozuo-btn success-btn">去付款</view>
						<view v-if="orderBtn === 'express'" class="order-caozuo-btn success-btn" @click.stop="onConfirm(item.order.id,)">确认收货</view>
					</block>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="order-list"
				v-for="(order,orderIndex) in orderList" 
				:key="orderIndex"
				@tap.stop="jump('/pages/userorde-xq/userorde-xq', { id: order.id })"
			>
				<view class="order-no">
					<view class="no">服务单号：{{ order.aftersale_sn }}</view>
					<view class="zhuangtai">{{ order.aftersale_status_text }}</view>
				</view>
				<view class="order-goods">
					<view class="order-goods-li" >
						<image :src="order.goods_image" mode="aspectFill"></image>
						<view class="order-goods-li-r">
							<view class="title">
								<view class="title-name">
									<view class="u-line-1">{{order.goods_title}}</view>
									<text class="price">¥{{order.goods_price}}</text>
								</view>
							</view>
							<view class="guige" >{{ order.goods_sku_text ? order.goods_sku_text : '' }}<text
									class="num">×{{order.goods_num}}</text></view>
						</view>
					</view>
					<view class="serve-status u-flex u-row-between" @tap.stop="jump('/pages/order/after-sale/log', { aftersaleId: order.id })">
						<view class="u-flex">
							<view class="serve-title">{{ order.aftersale_status_text }}</view>
							<view class="serve-content">{{ order.aftersale_status_desc }}</view>
						</view>
						<u-icon name="arrow-right" color="#666" size="16"></u-icon>

					</view>
				</view>
				<view class="order-caozuo" v-if="order.btns.length">
					<block v-for="orderBtn in order.btns" :key="orderBtn">
						<button v-if="orderBtn === 'cancel'" @tap.stop="onCancel(order.id, orderIndex)" class="u-reset-button obtn">取消</button>
						<button v-if="orderBtn === 'delete'" style="background:#FFEEEE;color:#E50808" @tap.stop="onDelete(order.id, orderIndex)" class="u-reset-button obtn">
							删除
						</button>
					</block>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 44,
				active: 0,
				orderList: [],
				show1: false,
				orderType: 'all',
				currentPage: 1,
				title: '确认收货',
				tips: '为了保证你的售后权益，请收到商品确认无误后再确认收货',
				orderState: [{
						id: 0,
						title: '全部',
						type: 'all'
					},
					{
						id: 1,
						title: '待付款',
						type: 'nopay'
					},
					{
						id: 2,
						title: '待发货',
						type: 'nosend'
					},
					{
						id: 3,
						title: '待收货',
						type: 'noget'
					},
					{
						id: 4,
						title: '售后',
						type: 'shouhou'
					}
				]
			}
		},
		onLoad() {
			this.GetStatusBarHeight();
			const type = this.$Route.query.type;
			this.orderType = type
		},
		onShow() {
			
			this.getOrderList()
		},
		methods: {
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			GetStatusBarHeight() {
				let that = this;
				wx.getSystemInfo({
					success: function(res) {
						that.height = 44 + res.statusBarHeight; //这就是状态栏的高度
					},
				});
			},
			//取消
			onCancel(aftersaleId, orderIndex) {
				let that = this;
				that.$http(
					'order.cancelAftersaleOrder',
					{
						id: aftersaleId
					},
					'取消中...'
				).then(res => {
					if (res.code === 1) {
						this.$u.toast(res.msg);
						this.orderList.splice(orderIndex, 1);
					}
				});
			},
			
			// 删除
			onDelete(aftersaleId, orderIndex) {
				let that = this;
				uni.showModal({
					title: '删除订单',
					content: '确定要删除这个订单么？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							that.$http(
								'order.deleteAftersaleOrder',
								{
									id: aftersaleId
								},
								'删除中...'
							).then(res => {
								if (res.code === 1) {
									this.$u.toast(res.msg);
									this.orderList.splice(orderIndex, 1);
								}
							});
						}
					}
				});
			},
			isCardTabs(id,index) {
				this.active = index
				if (this.orderType !== id && id!="shouhou") {
					this.orderType = id;
					this.orderList = [];
					this.currentPage = 1;
					this.lastPage = 1;
					this.getOrderList();
				}else{
					this.orderType = id
					this.orderList = [];
					this.currentPage = 1;
					this.lastPage = 1;
					this.getAftersaleList();
				}
			},
			getAftersaleList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('order.aftersaleList', {
					type: 'all',
					page: that.currentPage
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.orderList = [...that.orderList, ...res.data.data];
						that.isEmpty = !that.orderList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
			zhiliaodangwei() {
				this.show1 = false
			},
			isShouHuo() {
				this.show1 = true
				this.title = '确认收货'
				this.tips = '为了保证你的售后权益，请收到商品确认无误后再确认收货'
			},
			isDel() {
				this.show1 = true
				this.title = '删除订单'
				this.tips = '删除后订单将彻底删除确定要删除订单吗？'
			},
			// 确认收货
			onConfirm(id, itemId) {
				let that = this;
				that.$http(
					'order.confirm',
					{
						id: id,
						order_item_id: itemId
					},
					'确认中...'
				).then(res => {
					if (res.code === 1) {
						that.getOrderDetail();
					}
				});
			},
			// 获取全部商品
			getOrderList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('order.index', {
					type: that.orderType,
					page: that.currentPage
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.orderList = [...that.orderList, ...res.data.data];
						that.isEmpty = !that.orderList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
		}
	}
</script>

<style lang="less">
	/* 弹窗css */
	.popuptitle {
		width: 580rpx;
		background: #0DBE94;
		border: 1px solid #0DBE94;
		border-radius: 10px 10px 0px 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 31rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.popuptitle>image {
		width: 35rpx;
		height: 35rpx;
	}

	.popupcontenm {
		width: 642rpx;
		border-radius: 0px 0px 10px 10px;
		padding: 0 70rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		text-align: center;
		// padding: 79rpx 0 80rpx;
		padding-top: 79rpx;
		padding-bottom: 50rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 45rpx;
	}

	.popupcontenm>image {
		width: 90%;
	}

	.popup-btn {
		width: 100%;
		height: 60rpx;
		background: #0DBE94;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 110rpx;
	}

	/* 弹窗css	 */


	.top-tabs {
		// width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		background: #FFFFFF;
		margin: 0 -20rpx;

		.top-tabs-li {
			width: calc(100% / 4);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.active {
			color: #0DBE94;
			font-weight: bold;
		}
	}

	.order-list {
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 20rpx;

		.order-no {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 11rpx;
			padding-right: 22rpx;
			border-bottom: 1px solid #F7F7F9;

			.no {
				font-size: 24rpx;
				color: #797979;
			}

			.zhuangtai {
				font-size: 24rpx;
				color: #0DBE94;
			}
		}

		.order-goods {
			padding: 12rpx 21rpx;

			.order-goods-li {
				display: flex;
				margin-bottom: 30rpx;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 14rpx;
					overflow: hidden;
				}

				.order-goods-li-r {
					width: calc(100% - 160rpx);
					padding-left: 21rpx;
				}

				.title-name {
					display: flex;
					align-items: center;
					justify-content: space-between;

					view {
						font-size: 30rpx;
					}

					.price {
						font-size: 26rpx;
						color: #CD0000;
					}
				}

				.guige {
					font-size: 24rpx;
					color: #888888;
					display: flex;
					justify-content: space-between;
					margin-top: 19rpx;
				}
			}
		}

		.order-goods-zj {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 30rpx;
			margin-top: 20rpx;

			text {
				margin-left: 10rpx;
			}
		}

	}

	.order-caozuo {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: #FFFFFF;
		height: 110rpx;
		border-top: 1px solid #F7F7F9;

		.order-caozuo-btn {
			width: 130rpx;
			height: 50rpx;
			border: 2rpx solid #999999;
			border-radius: 25rpx;
			font-size: 26rpx;
			text-align: center;
			line-height: 50rpx;
			font-size: 26rpx;
			margin-left: 30rpx;
		}

		.success-btn {
			border: 2rpx solid #FF7759;
			color: #FF7759;
		}
	}
	.obtn {
		width: 160rpx;
		line-height: 60rpx;
		background: rgba(238, 238, 238, 1);
		border-radius: 30rpx;
		font-size: 26rpx;
	
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		margin-right: 20rpx;
		padding: 0;
	}
	.serve-status {
		height: 94rpx;
		background: rgba(246, 246, 246, 1);
		border-radius: 4rpx;
		// margin: 0 20rpx 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		.serve-title {
			font-size: 26rpx;
	
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin-right: 30rpx;
		}
		.serve-content {
			font-size: 20rpx;
	
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}
	}
	.u-row-between {
	    justify-content: space-between;
	}
	.u-flex {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	}
</style>
